<template>
	<div class="task-popup" v-if="visible">
		<img src="@/assets/2/images/task-gold.png" />
		<div class="time">{{ time }}s</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			time: 15,
			current: null,
			visible: false,
			status: false,
			timer: null
		};
	},

	computed: {
		...mapGetters(['taskCategory'])
	},

	methods: {
		open(current) {
			this.current = current;
			this.stop();
			this.start();
		},

		close() {
			this.time = 15;
			this.stop();
		},

		start() {
			if (!this.current) {
				return false;
			}

			if (this.current != this.taskCategory) {
				return this.stop();
			}

			this.visible = true;
			this.status = true;

			const next = () => {
				if (!this.status) {
					return false;
				}

				this.timer = setTimeout(() => {
					this.time -= 1;

					if (this.time < 1) {
						this.finish();
					} else {
						next();
					}
				}, 1000);
			};

			next();
		},

		restart() {
			this.close();
			this.start();
		},

		stop() {
			clearTimeout(this.timer);
			this.status = false;
			this.visible = false;
		},

		finish() {
			this.$store.dispatch('finishTask', { category: this.taskCategory });
			this.$store.commit('REMOVE_SELECT', 'taskCategory');
			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.task-popup {
	position: fixed;
	right: 20px;
	bottom: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;

	img {
		display: block;
		height: 84px;
		width: 84px;
	}

	.time {
		background-color: #fff;
		border: 2px solid #ff462c;
		border-radius: 10px;
		width: 90px;
		text-align: center;
		position: relative;
		top: -20px;
	}
}
</style>
